<template>
  <div class="home">

  <div class="find-main">

  <!-- 中间主要内容部分 -->
  <div class="findBox">
    <div class="title">
      <ul  ref="title">
        <li style="font-weight: 700;" @click="animation('HomeJx',$event)">精选</li>
        <li @click="animation('HomeGd',$event)">歌单</li>
        <li @click="animation('HomeDt',$event)">主播电台</li>
        <li @click="animation('HomePh',$event)">排行榜</li>
        <li @click="animation('HomeGs',$event)">歌手</li>
        <li @click="animation('HomeNew',$event)">最新音</li>
        <div class="dh" :style="{left:dh+'px',width:dhWidth+'px',transition: miao, }"></div>
      </ul>
    </div>
    <div class="findBoxConcent" >
      <keep-alive>
        <component :is="showPag"></component>
      </keep-alive>
      
    </div>
  </div>
  </div>
  </div>
</template>

<script>

import HomeJx from '@/components/HomeJx.vue'
import HomeGd from '@/components/HomeGd.vue'
import HomeDt from '@/components/HomeDt.vue'
import HomePh from '@/components/HomePh.vue'
import HomeGs from '@/components/HomeGs.vue'
import HomeNew from '@/components/HomeNew.vue'

import useAddRouter from '@/utils/loadingRouter'
export default {
  name: 'HomeView',
  data() {
    return {
      showPag:'HomeJx',
      dh:2,
      dhWidth:36,
      miao:'left 0.2s linear',
      routerDate:Array,
       
    }
  },

  components: {
    HomeJx,HomeGd,HomeDt,HomePh,HomeGs,HomeNew
  },
  created() {
     useAddRouter()
     this.routerDate = this.$store.getters.updateNav
      this.$nextTick(function () {})
  },
  mounted() {

  },
  methods: {
    
    animation(target,e){
      
     this.$nextTick(function () {// 调用$nextTick函数

    //e.target.innerHTML获取当前元素值
    //this.$refs.title.childNodes[0].offsetLeft// 获取dom子元素到父元素的距离
    for (let index = 0; index < this.$refs.title.childNodes.length; index++) {
      const element = this.$refs.title.childNodes[index].innerHTML;
        this.$refs.title.childNodes[index].style.fontWeight = 200;
      if(element == e.target.innerHTML  ){
                  this.showPag = target;     
                  var str =element;
                  // console.log(this.dh)
                  // console.log(this.$refs.title.childNodes[index].offsetLeft)
          var len = 0;
          //遍历字符串，以字符的Unicode编码识别中文
         this.dhWidth = 36;
          for(var key in str)
          {
          //中文字符在Unicode编码中占据 0x4E00~0x9FBF 字段
          if( (str.charCodeAt(key) >= 0x4E00) && (str.charCodeAt(key) <= 0x9FBF) )
          {
          len += 2;
          }
          else
          {
          len ++;
          }
          }
          this.dh =this.$refs.title.childNodes[index].offsetLeft+2
          // console.log(this.dhWidth)
          this.dhWidth = this.dhWidth*(len/4)
          // console.log(this.$refs.title.childNodes[index])
          this.$refs.title.childNodes[index].style.fontWeight = 700;
         
          
          
          
          
          
      }
    }
    
	})
    }
   
  }
}
</script>
<style lang="less">
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.TopBar{
  height: .390625rem /* 75/192 */;
  background-color: #F5F5F5;
  overflow: hidden;
  width: 100%;
  position: relative;
  
  .center{
    overflow: hidden;
    width: 9.75rem /* 1872/192 */;
    height: .229167rem /* 44/192 */;
    // border: 1px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -4.875rem; /* 936/192 */
    margin-top: -.114583rem; /* 22/192 */

    img{
    width: .833333rem /* 160/192 */;
    margin: auto 0;
    }
    .topBarLeft{
      width: 50%;
      display: flex;
      float: left;
      //  border: 1px solid black;
        ul{
         margin-left: .572917rem /* 110/192 */;
         display: flex;
         align-items: center;
         
         li{
           margin-left: .083333rem /* 16/192 */;
           .inputBox{
          height: 100%;
          width: 1.041667rem /* 200/192 */;
          background: #EAEAEA;
          border-radius:.182292rem /* 35/192 */;
          display: flex;
          justify-content:center;
           align-items:center; 
          span{
            display: block;
            font-size: .114583rem /* 22/192 */;
            margin-left: .072917rem /* 14/192 */;
          
          }
          input{
            width: 80%;
            background: #EAEAEA;
            margin-left: 2px; 
            color: #B3B3B3;
          }
          input::-webkit-input-placeholder { /* WebKit browsers */  
            color: #B3B3B3; 
          }  
        }
         }
       }
    }
  
     
  }
 
  .topBarRight{
    height: 100%;
    float: right;


      ul{
         height: 100%;
        li{
          height: 100%;
        }
        display: flex;
         align-items: center;
         li:not(:first-child){
           display: flex;
           align-items: center;
           margin-left: .109375rem /* 21/192 */;
         }
      }
      .loginCenter{
        display: flex;
        align-items: center;
        width: 1.041667rem /* 200/192 */;
         font-size: 12px;
        .tx{
          font-size:32px;
        }
        .sj{
          font-size: 14px;
        }
        span,div{
          margin-left: .041667rem /* 8/192 */;
        }
      }
    
  }
   

  .yuan{
    background: #EBEBEB;
    border-radius:50% ;

    text-align: center;
    width: .192708rem /* 37/192 */;
    height: .177083rem /* 34/192 */;
  }
  .yuan2{
    background: #EBEBEB;
    border-radius:50% ;

    text-align: center;
    width: .213542rem /* 41/192 */;
    height: .213542rem /* 41/192 */;
  }
//垂直居中 弹性布局 在父级中设置
.jz{
 display:flex;
    justify-content:center;
    align-items:center; 
}   
}
.find-main{
     width: 100%;


.findBox{
//   max-width: 84%;
min-width: 82%;
  // border: solid #666666 1px;
//   margin: 25px 0 0 72px;
  position: relative;
   .title>ul{
    display: flex;
    font-weight: 200;
    // li>a{
    //    .font23();
    //     margin-left: 35px;
    // }
    li{
       .font21px();
    }
    li:not(:first-child){
        margin-left: 35px;
    }
    
    .dh{
    width: 36px;
    height:3.5px;
    background: #EC4141;
    position: absolute;
    top: 32px;
    
}
  }
  .findBoxConcent{
    margin-top: 22px;
    // border: 1px solid palevioletred;
  }
}
   }
 
.iconStyleRIght{
  font-size: .119792rem /* 23/192 */;
  color: #313131;
 
}
.iconStyleLeft{
  font-size: .098958rem /* 19/192 */;
  color: #313131;
}
.font23{
  font-size: .119792rem /* 23/192 */;
}
.font23Px{
   font-size:23px;
}
.font23(){
  font-size: .119792rem /* 23/192 */;
}
.font21px(){
  font-size:21px;
}
.marginRight{
  margin-right:.072917rem /* 14/192 */;
}
.floatRight{
  float: right;
}
.jia{
  color: #666666;
  margin-right: .104167rem /* 20/192 */;
  font-weight: inherit;
}

</style>